//轮播
var mySwiper = new Swiper('.swiper', {
    // direction: 'horizontal', // 垂直切换选项
    // loop: true, // 循环模式选项

    // // 如果需要分页器
    // pagination: {
    //     el: '.swiper-pagination',
    //     clickable: true,
    // },

    // // 如果需要前进后退按钮
    // navigation: {
    //     nextEl: '.swiper-button-next',
    //     prevEl: '.swiper-button-prev',
    // },

})
//渲染数据
function showprodate() {
    let url = window.location.href
    let newurl = url.substring(url.indexOf('?') + 1).split('=')
    let map = new Map();
    map.set(newurl[0], newurl[1]);
    console.log(map.get('id'))
    //获取数据
    async function getprodate() {
        let date = await myPromise({
            url: 'http://api.yuguoxy.com/api/shop/find',
            method: 'get',
            data: {
                id: map.get('id')
            }
        })
        console.log(date)
        showba(date)
        showjiesao(date)
        gwctz(date)
    }
    getprodate()
}
showprodate()

//渲染轮播
function showba(data) {
    let datalist = data.resultInfo.list || []
    let newstr = ''
    datalist.forEach(element => {
        let str = `<div class="swiper-slide"><img src="${element}" alt=""></div>`
        newstr += str
    });
    // console.log(data.resultInfo.list[0], newstr)
    $('.swiper-wrapper').html(newstr)
    //轮播
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: true, //等同于以下设置
        loop: true,
        autoplayDisableOnInteraction: false /* 注意此参数，默认为true */
    })
    let sall = document.querySelectorAll('.swiper-pagination-bullet')
    for (let i = 0; i < datalist.length; i++) {
        sall[i].style.background = `url(${datalist[i]})`
        sall[i].style.backgroundSize = `100%,100%`

    }

}
//渲染标题
function showjiesao(data) {
    let datalist = data.resultInfo
    let product = `<span>淘</span>
        <span>包邮</span>
        <span>${datalist.shop}</span>`
    $('.jiesao').html(product)
    let jiege = `<div>￥原价${datalist.id}</div>
        <div>折扣价:￥<span>${datalist.price}</span></div>
        <div>${datalist.oldprice}人已经买了</div>`
    $('.jiege').html(jiege)
}
//放大镜
function fdj() {
    let glass1 = new Glass('#showbox')
    glass1.onGlass()
    let swiper = document.querySelector('.swiper')
    let rigbox = document.querySelector('.right-box')
    let righbox = document.querySelector('.right-box>img')
    swiper.addEventListener('mouseover', function (e) {
        mySwiper.autoplay.stop()
        rigbox.style.opacity = '1'
        console.log(e.target.getAttribute('src'))
        righbox.setAttribute('src', `${e.target.getAttribute('src')}`)
    })
    swiper.addEventListener('mouseout', function () {
        mySwiper.autoplay.start()
        rigbox.style.opacity = '0'
    })

}
fdj()

//跳转购物车
function gwctz(data) {
    console.log(data)
    let aeml = document.querySelector('a')
    aeml.addEventListener('click', function (e) {
        e.preventDefault()
        data.num = 1
        data.state = true
        console.log('0', data)
        let newdata = JSON.parse(localStorage.getItem('date')) || []
        console.log(newdata)
        if (newdata == false) {
            newdata.push(data)
            localStorage.setItem('date', JSON.stringify(newdata))
        } else {
            let iscf = newdata.find(function (item, index) {
                return item.resultInfo.id == data.resultInfo.id
            })
            if (iscf) {
                iscf.num++
                localStorage.setItem('date', JSON.stringify(newdata))
            } else {
                newdata.push(data)
                localStorage.setItem('date', JSON.stringify(newdata))
            }
        }
        window.location.href = `cart.html`
    })


}